According to William S. Cleveland dotplots are an alternative to the bar chart, in which dots are used to depict the quantitative values (e.g. counts) associated with categorical variables.
<!-- Include the CanvasXpress library in your HTML file -->
<link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
<script src="https://www.canvasxpress.org/canvasXpress.min.js"></script>
<!-- Create a canvas element for the chart with the desired dimensions -->
<div>
<canvas id="canvasId" width="600" height="600"</canvas>
</div>
<!-- Create a script to initialize the chart -->
<script>
<!-- Create the data for the graph -->
var data = {
"y" : {
"data" : [
[94,96,112,92,90,78,94,76,79,86,93,84,67,73,80,62,72,71,68,64,72],
[152,151,165,141,137,118,131,112,114,119,124,114,94,100,107,84,92,88,82,78,81]
],
"smps" : ["MIT","Stanford","Harvard","U.Penn","Princeton","Chicago","Georgetown","Tufts","Yale","Columbia","Duke","Dartmouth","NYU","Notre Dame","Cornell","Michigan","Brown","Berkeley","Emory","UCLA","SoCal"],
"vars" : ["Women","Men"]
},
"z" : {
"Connect" : ["1","1"]
}
}
<-- Create the configuration for the graph -->
var config = {
"axisAlgorithm":"wilkinson",
"connectBy":"Connect",
"dotplotType":"stacked",
"graphType":"Dotplot",
"showTransition":"false",
"smpTitle":"School",
"sortDir":"descending",
"theme":"CanvasXpress",
"title":"Gender Earnings Disparity",
"xAxis2Title":"Annual Salary",
"xAxisTickFormat":"\\$%sK",
"xAxisTicksMinorShow":"false",
"xAxisTitle":"Annual Salary"
}
<!-- Call the CanvasXpress function to create the graph -->
var cX = new CanvasXpress("canvasId", data, config);
<-- Functions after rendering graph -->
cX.sortSamplesByVariable("Men");
</script>
library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/cX-dumbbell-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
z=read.table("https://www.canvasxpress.org/data/cX-dumbbell-var.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
data=y,
varAnnot=z,
axisAlgorithm="wilkinson",
connectBy="Connect",
dotplotType="stacked",
graphType="Dotplot",
showTransition=FALSE,
smpTitle="School",
sortDir="descending",
theme="CanvasXpress",
title="Gender Earnings Disparity",
xAxis2Title="Annual Salary",
xAxisTickFormat="\$%sK",
xAxisTicksMinorShow=FALSE,
xAxisTitle="Annual Salary",
afterRender=list(list("sortSamplesByVariable", list("Men")))
)